<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form label-width="130px" style="padding-right: 30px;">
        <el-row>
          <el-col :span="16"  style="margin-top: 27px;">
            <el-form-item class="form-item" label="监测项名称 :" prop="name">
              <span>{{name}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="float: right;margin-right: 5px;">
        <el-button type="primary" size="mini" @click="chooseFiled(id)">选择配置字段</el-button>
      </div>
      <avue-crud
        :data="workingItemListData"
        :option="option"
        :page="page"
        :table-loading="tableLoading"
        @on-load="getWorkingItemPageList"
        @refresh-change="refreshChange"
        class="avuecrud"
      >
        <template slot-scope="scope" slot="menu">
          <div class="menu-title" @click.stop="deleteProgressFiled(scope.row,scope.index)">
            <i class="iconfont icondelete icon-primary"></i>
            <p class="menu-title-ztext">删除</p>
          </div>
        </template>
      </avue-crud>

     <el-dialog title="请选择配置字段" :visible.sync="dialogFormVisible" width="85%">
     <el-form
         label-width="130px"
         :model="progressFiledForm"
         style="padding-right: 30px;"
         :rules="progressFileRules"
         ref="progressFiledForm"
       >

           <!--<el-col :span="11">
             <el-form-item class="form-item" label="类型:" prop="type">
               <el-input v-model="progressFiledForm.type" placeholder="请输入类型"></el-input>
             </el-form-item>
           </el-col>-->
       <el-row>
         <!--<el-col :span="11">
           <el-form-item class="form-item" label="值:" prop="value">
             <el-input v-model="progressFiledForm.value" placeholder="请输入值"></el-input>
           </el-form-item>
         </el-col>-->
         <el-col :span="11">
           <el-form-item class="form-item" label="展现组件:" prop="displayWay">
             <el-select
               v-model="progressFiledForm.displayWay"
               placeholder="请选择"
               style="width: 280px;"
             >
               <el-option
                 v-for="item in showWAY"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="11">
           <el-form-item class="form-item" label="是否必填:" prop="required">
             <el-select
               v-model="progressFiledForm.required"
               placeholder="请选择"
               style="width: 280px;"
             >
               <el-option
                 v-for="item in natureDIC"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       </el-form>
        <span style="font-size: 17px;font-weight: 600;color: black;margin-left: 27px;">所选字段名称：{{choosedCustomField}}</span>
        <div class="card-body">
          <avue-crud :data="customFiledListData"
                     :option="customOption"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getCustomFiledList"
                     @refresh-change="refreshChange"
                     @search-change="searchChange"
                     @current-row-change="handleCurrentRowChange"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" style="padding: 9.5px 0px">
                <i class="iconfont  icon-primary"></i>
                <p class="menu-title-text"></p>
              </div>
            </template>
          </avue-crud>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelProgressFiled()">取 消</el-button>
          <el-button type="primary" @click="addProgressFiled()">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </basic-container>
</template>

<script>
  import { workingItemDetail } from "@/api/pim/pim";
  import { workingitemfieldPageList } from "@/api/pim/pim";
  import { customfieldPageList } from "@/api/pim/pim";
  import {addProgressFiled} from "@/api/pim/pim"
  import {deleteProgressFiled} from "@/api/pim/pim"
  import {addprogressFileRules}  from "@/const/infoRules";
  export default {
    name: "workingProgressFiledList",
    created(){
        this.getDetailData();
        this.progressFiledForm.workingItemId=this.$route.params.id
        this.progressFiledForm.type='1'
    },
    data(){
      return{
        headerData:{
          title:'配置字段'
        },
        progressFileRules:addprogressFileRules,//表单验证
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
          name:''
        },
        progressFiledForm: {
        },
        idsForm:{
          id:0
        },
        natureDIC:[
          {
            label:'是',
            value:true
          },
          {
            label:'否',
            value:false
          },
        ],
        showWAY:[
          {
            label:'文本',
            value:"1"
          },
        ],
        name:'',//模版名称
        workingItemListData: [],
        option: {
          page: true,
          addBtn: false,
          editBtn: false,
          indexLabel: "序号",
          index: true,
  indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth:200,
          keyId: "id",
          column: [{
            label: "中文名称",
            width:300,
            prop: "name",
            cell: true
          },
            /*{
              label: "英文名称",
              width:300,
              prop: "nameEng",
              cell: true
            },*/
            {
              label: "展现组件",
              prop: "type",
              cell: true,
              formatter: function (row, value, label, column) {
                if (row.displayWay == '1') {
                  return "文本";
                }
              }
            },
          ]
        },
        tableLoading: false,
        dialogFormVisible:false,
        customFiledListData: [],
        choosedCustomField: '',
        choosedCustomFieldTemp: '',
        customOption: {
          highlightCurrentRow: true,
          /*menu:false,*/
          page: true,
          addBtn: false,
          editBtn: false,
          indexLabel: "序号",
          index: true,
          cellBtn: false,
          delBtn: false,
  indexWidth:70,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth:200,
          keyId: "id",
          column: [{
            label: "中文名称",
            width:300,
            prop: "name",
            cell: true,
            search:true
          },
            {
              label: "英文名称",
              width:300,
              prop: "nameEng",
              cell: true
            },
            {
              label: "字段长度",
              prop: "columnLength",
              cell: true
            },
          ]
        },

      }
    },
    methods:{
     //选择字段
      chooseFiled(){
        this.dialogFormVisible = true;
      },
      cancelProgressFiled(){
        this.dialogFormVisible = false;
      },

      getDetailData(){
        workingItemDetail(this.$route.params.id).then(response => {
          this.getresultDetail(response);
        })
      },
      async  getresultDetail(response){
        if(response.data.code == '0') {
          var records = response.data.data
          this.name = records.name
          this.planningTitle=records.planningTitle;
          this.pmuc=records.pmuc
          this.id=records.id
        }
      },
      getWorkingItemPageList(page){
        this.tableLoading = true;
        workingitemfieldPageList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          states:this.state,
          workingItemId:this.$route.params.id,
        },)).then(response => {
          this.workingItemListData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      getCustomFiledList(page,params){
        this.tableLoading = true;
        customfieldPageList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          states:this.state
        },params)).then(response => {
          this.customFiledListData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      //根据搜索框筛选列表
      searchChange(params) {
        this.page.currentPage = 1
       this.getCustomFiledList(this.page,params)
      },
      refreshChange() {
        this.getResultList(this.page)
      },
      handleCurrentRowChange(val) {
        this.choosedCustomFieldTemp = val;
        this.choosedCustomField = val.name;
        this.$notify({
          showClose: true,
          message: '已选字段： ' + val.name,
          type: 'success',
        });
      },
      addProgressFiled(){
        this.progressFiledForm.customFieldId = this.choosedCustomFieldTemp.id;
        if (this.progressFiledForm.customFieldId == undefined) {
          this.$notify({
            title: '提示',
            message: '请选择字段',
            type: 'success',
            duration: 2000
          });
          return;
        }
        this.$confirm("确定添加字段?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$refs.progressFiledForm.validate(valid => {
            if (valid) {
              addProgressFiled(this.progressFiledForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "添加成功",
                    type: "success",
                    duration: 2000
                  });
                  this.dialogFormVisible = false;
                  this.$router.go(0);
                }
              })
            }
          })
        })
      },
      deleteProgressFiled(row) {
        this.idsForm.id=row.id
        this.$confirm("确定删除此字段吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          deleteProgressFiled(this.idsForm).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              });
              this.$router.go(0);
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .card-border {
    border: 1px solid #d2d2d2;
    padding: 12px;
  }
  .form-submit {
    text-align: center;
  }
  .form-item{
    font-weight: 600;
  }
  #searchInput {
    height: 40px;
    border: 1px solid #dadada;
    outline: 0;
    line-height: 40px;
    text-indent: 1rem;
    border-radius: 0.31rem;
  }
  .form-submit-dialog{
    float: right;
    margin-right: 22px;
  }
  .form-group {
    margin-top: 1rem;
    margin-left: 26px;
  }
  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }
</style>
